<template>
  <el-dialog
    title="品种详情"
    :visible.sync="detailDialog"
    width="50%"
    :before-close="handleClose"
  >
    <el-row class="wrapper">
      <el-col :span="4" class="item">品种名称：</el-col>
      <el-col :span="20" class="item">{{ data.name }}</el-col>
      <el-col :span="4" class="item">品种简介：</el-col>
      <el-col :span="20" class="item">{{ data.introduction }}</el-col>
      <el-col :span="4" class="item">所在地块：</el-col>
      <el-col :span="20" class="item">{{ data.entName }} / {{ data.plantationName }} / {{ data.placeName }}</el-col>
      <el-col :span="4" class="item">品种图片：</el-col>
      <el-col :span="20" class="item">
        <el-image
          class="img"
          :src="data.image"
          :preview-src-list="[data.image]"
        />
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    detailDialog: {
      required: true,
      type: Boolean
    },
    data: {
      required: true,
      type: Object
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleClose() {
      this.$emit('close-dialog')
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  > .item {
    line-height: 40px;
  }
  .img {
    width: 100%;
    border-radius: 5px;
  }
}
</style>
